<template>
    <table class="table table-striped">
        <thead>
        <tr>
            <th></th>
            <th>商品</th>
            <th class="text-right">单价</th>
            <th class="text-right">数量</th>
            <th class="text-right">小计</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody class="product_list">
        <tr v-for="(item,index) in cartItems" :class="item.product_sku.product.on_sale? '': 'not_sale'">
            <td>
                <input type="checkbox"
                       v-model="item.selected"
                       :disabled="item.selected===''"
                >
            </td>
            <td style="display:flex;">
                <div class="avatar"><a href="#"><img :src="item.product_sku.product.image"></a></div>
                <div>
                    <div class="product_title">{{item.product_sku.product.title}}</div>
                    <div class="sku_title">{{item.product_sku.title}}</div>
                    <div class="alert"></div>
                </div>
            </td>
            <td class="text-right price"><em>￥</em>{{item.product_sku.price}}</td>
            <td class="text-right amount">{{item.amount}}</td>
            <td class="text-right subtotal">{{(item.product_sku.price*item.amount).toFixed(2)}}</td>
            <td><span @click="clickRemoveBtn(item.product_sku_id)" class="btn btn-xs btn-danger btn-remove">✖</span></td>
        </tr>
        <tr>
            <th colspan="5" class="text-right sum">已选商品的金额总计：<em>￥</em><span>{{sum.toFixed(2)}}</span></th>
        </tr>

        <!--<tr><td colspan="5">传递给 axios 的参数 items 值：<br>{{selectedItems}}</td></tr> &lt;!&ndash; 本行仅供调试用 &ndash;&gt;-->
        </tbody>
    </table>
</template>

<script>
    export default {
        name: "CartItems",
        props:{
            items:Array,
        },
        data(){
            return{
                cartItems:[],           // 点击删除按钮会删除这个数组的元素
            }
        },
        computed:{
            sum(){
                let ret=0;
                this.selectedItems.forEach(function (item) {
                    return ret+=item.sku_price*item.amount
                })
                return ret;
            },
            selectedItems(){
                let arr=[];
                for(let i=0; i<this.cartItems.length; i++){
                    if(this.cartItems[i].selected)
                        arr.push({
                            amount: this.cartItems[i].amount,
                            sku_id: this.cartItems[i].product_sku.id,
                            sku_price: this.cartItems[i].product_sku.price, // 这个价格仅仅参与户客户端合计金额的计算，服务器端应当通过 sku_id 在数据库中重新获取价格
                        })
                }
                // this.$set(app, 'items', arr);   //组件数据传出：绑定到 app 上，可供组件外部的 jQuery 等js代码调用！
                app.items=arr;
                return arr;
            }
        },
        mounted(){
            this.cartItems=this.items;      //外部数据传入组件，之后的所有操作都是围绕着这个组件内部数据 cartItems 进行的
            for(let i=0; i<this.cartItems.length; i++){
                if(this.cartItems[i].product_sku.product.on_sale){
                    this.$set(this.cartItems[i], 'selected', true)  //开端：关键的一步赋值语句！
                }
                else
                    this.cartItems[i].selected='';
            }
        },
        //*
        watch:{// 没有用到侦听功能，删除本块内容不影响程序使用（这里仅仅测试一下深度侦听功能）
            cartItems:{
                handler(newValue, oldValue) {
                    console.log('深度侦听购物车全部商品为：')
                    console.log(newValue)
                },
                deep:true,
            }
        },
        //*/
        methods:{
            clickRemoveBtn(sku){
                swal({
                    title:'确定要删除吗？',
                    icon:'warning',
                    buttons:['取消', '确定'],
                    dangerMode: true,
                }).then(function(sku, vue){
                    return function(del){
                        if(del)
                            axios.delete('/cart/'+sku).then(
                                function(sku,vue){
                                    return function(res){
                                        vue.delete(sku);
                                    }
                                }(sku, vue),
                                function(error){
                                    swal('删除失败，请稍后再试','','error')
                                }
                            )
                    }
                }(sku, this))
            },
            delete(sku){
                let n=this.cartItems.length;
                for(let i=0; i<n; i++){
                    if(this.cartItems[i].product_sku_id===sku){
                        this.cartItems.splice(i, 1);
                        break;
                    }
                }
            },
        },
    }
</script>

<style scoped lang="stylus">
    .product_list
        .not_sale>td
            color:gray
            text-decoration: line-through
            .alert
                position:relative
                &:after
                    position:absolute
                    left:0;top:4px;
                    color:red
                    content:'商品已下架'
                    white-space:nowrap
        td
            color:#303030
        .avatar
            padding-right:16px
            img
                max-width:80px;
                max-height:80px;
        .sku_title
            color: #636b6f
            font-size:0.8em
        .price
            em
                font-size:10px
                margin-right:2px
        .sum
            color:#3c3c3c
            em
                font-size:10px
                margin-right:2px
            span
                font-size:28px

</style>